@charset "utf-8";
/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, table, caption, input, textarea, button,
article, aside, canvas, details, embed, figure, figcaption, footer, header, menu,
nav, output, ruby, section, summary, time, mark, audio, video
{ margin:0;padding:0;border:0;font-family:'微软雅黑';}

body{ font-family:'微软雅黑';}
article, aside, details, figcaption, figure, footer, header, menu, nav, section { display: block;}
html {height:auto;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none; }
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content:none;}
a {text-decoration:none;color:inherit;}
a:hover {text-decoration:none;}
legend, caption, hr {display:none;}
em {font-style:normal;}
input {vertical-align:middle;}
p,h3,h2,h1{letter-spacing: normal;}
input,textarea,button,select{ font-family: sans-serif; }
section{width:100%;}
body{ font-family:'NotoSans', 'Arial', sans-serif, sans-serif;width: 100%;height: 100%; color:#333333;background-color: #f0f0f0;}
button{cursor: pointer}
button,select,input{ font-family:'NotoSans', 'Arial', sans-serif, sans-serif;-webkit-appearance: none;border: 0;background: transparent;  outline: 0;}
video{object-fit: cover;}

ol, ul,li { list-style: none; }
.dimmed{position: fixed;top:0;right:0;bottom:0;left:0;background: #fff;z-index: 999;width: 100%;height: 100%;opacity: 1;visibility: visible;}
.eng{font-family: 'Arial', sans-serif;background-color: transparent; -webkit-font-smoothing: antialiased;}
.ir_text, .alt_table, .hidden_label {position: absolute; top:-999999%; left:-999999%; text-indent: -9999px;overflow: hidden;height: 0;}
.ir_text > *, .alt_table > *{text-indent: -9999px;overflow: hidden;height: 0;}
#skipTo {width: 100%; overflow: hidden; position: relative; z-index: 1000;}
#skipTo a {margin: 0px -1px -1px 0px; width: 1px; height: 1px; text-align: center; line-height: 0; overflow: hidden; font-size: 0px; display: block;}
#skipTo a:focus {background: rgb(32, 38, 44); margin: 0px; padding: 8px 0px 0px 15px; width: auto; height: 20px; color:#ffffff; line-height: 1; font-size: 12px; font-weight: 700;}
#skipTo a:hover {background: rgb(32, 38, 44); margin: 0px; padding: 8px 0px 0px 15px; width: auto; height: 20px; color:#ffffff; line-height: 1; font-size: 12px; font-weight: 700;}
#skipTo a:active {background: rgb(32, 38, 44); margin: 0px; padding: 8px 0px 0px 15px; width: auto; height: 20px; color:#ffffff; line-height: 1; font-size: 12px; font-weight: 700;}

#wrap{  min-width: 1280px;max-width: 2000px;margin: 0 auto;}
#wrap.en{font-family: 'Arial', sans-serif;}
#wrap.en button,#wrap.en select,#wrap.en input{ font-family:'Arial'}
#header{position: absolute;top:0;left:0;right:0;min-width:1083px;}
#gnb .navi:before {
    content: "";
    position: absolute;
    top: 0;bottom:0;
    left: 80px;right:80px;
    z-index: 1000;
    height: 100%;
    cursor: pointer;
    opacity: 0;
    background: rgba(0, 0, 0, 0.75);
    visibility: hidden;
}
body.stop{overflow: hidden;}
body.stop #gnb .navi:before {visibility:visible;opacity: 1;}
#misc_btns{position: relative;overflow: hidden; max-width: 1280px;margin: 0 auto;padding: 28px 0 12px;z-index: 999;opacity: 1;}
#misc_btns a{position: relative;display: inline-block;font-size: 11px;color: #fff;line-height: 12px;padding: 0 11px;}
#misc_btns a:before{content: '';position: absolute;top:0;bottom:0;left:0;width: 1px;background: #fff;opacity: 0.3}
#misc_btns a:first-child:before{content: none;}
#misc_btns .left_area{float: left;font-size: 0;letter-spacing: 0;word-spacing: 0;}
#misc_btns .left_area a{font-size: 11px;letter-spacing: 0;line-height: 12px;  font-weight: bold;}
#misc_btns .right_area{float: right;font-size: 0;letter-spacing: 0;word-spacing: 0;}
#gnb{position: relative;  top: 0;text-align: center;width:100%;margin: 0 auto;z-index: 999;min-height: 80px; }
#gnb .navi{min-width:1280px;position: absolute;left:0;right: 0;top:0;  width: 100%;height:96px; background-color: #ffffff;max-width: 1280px;margin: 0 auto;font-size: 0;letter-spacing: 0;word-spacing: 0;}
#gnb .navi:after{content:none;}
#gnb .navi .center{position:relative;max-width: 1060px; background:#666; margin: 0 auto;display: inline-block;vertical-align: top;}
#gnb .navi .center> .center_inner>*{display: inline-block; vertical-align: top;}
#gnb .navi .btn_left{left:0;top:0;bottom:0;z-index: 1000; width: 80px;height:96px;font-size: 15px;position: absolute;top: 0;left: 0; }
body.active_right #gnb .navi .btn_left{z-index: 999;}
body.active_left #gnb .navi .btn_right{z-index: 999;}
#gnb .navi .btn_right{right:0;top:0;bottom:0;z-index: 1000;width: 80px;height:96px;font-size: 15px;position: absolute;top: 0;right: 0;}
#gnb .navi .btn_left{display: block;  background: #2FADF1 url(../images/btn_business.png) no-repeat left center;}
#gnb .navi .btn_right{display: block; background: #2FADF1 url(../images/btn_people.png) no-repeat right center;}
#gnb .navi .btn_left:hover{background-position:center center;}
#gnb .navi .btn_right:hover{background-position:center center;}
body.stop #gnb .navi .btn_left{background-position:right center;}
body.stop #gnb .navi .btn_right{background-position:left center;}


#wrap.main #gnb .navi > a.left:hover > div.rot_box:after{background-position:center center;}
#wrap.main #gnb .navi > a.right:hover > div.rot_box:after{background-position:center center;}
body.stop #wrap.main #gnb .navi > a.left > div.rot_box:after{background-position:right center;}
body.stop #wrap.main #gnb .navi > a.right > div.rot_box:after{background-position:left center;}

body.stop #misc_btns{opacity: 0;}

#wrap.main #gnb .navi {width:210px;min-width:210px;font-size:0;letter-spacing:0;word-spacing:0;background: none;overflow: hidden;}
#wrap.main #gnb .navi > * {width:80px;height:80px;}
#wrap.main #gnb .navi > *:hover > div.rot_box { transform: rotateX(-90deg);-ms-transform: rotateX(-90deg);-webkit-transform: rotateX(-90deg); }
#wrap.main #gnb .navi > * > div.rot_box {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    float:left;
    transform: rotateX(90deg); -ms-transform: rotateX(90deg); -webkit-transform: rotateX(90deg);
    transition: transform 1s cubic-bezier(.217,.60,.355,1);
}
#wrap.main #gnb .navi > div.center .center_inner{  position: relative;visibility: hidden;opacity: 0;/*min-width: 1060px;*/  min-width: 1070px; overflow: hidden}
#wrap.main #gnb .navi .btn_left{background: none;position: absolute;top: 0;left: 0;}
#wrap.main #gnb .navi .btn_right{background: none;position: absolute;top: 0;right: 0;}

#wrap.main #gnb .navi > div.center > div.rot_box { transition-delay:0.1s; }
#wrap.main #gnb .navi > a.right > div.rot_box { transition-delay:0.2s; }

#wrap.main #gnb .navi > * > div.rot_box:before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;

    transform: rotateX(0deg) translateZ(35px);
    backface-visibility: hidden;
}

#wrap.main #gnb .navi > a.left > div.rot_box:before { box-shadow: inset 0 0 0 3px #F1732F; }
#wrap.main #gnb .navi > div.center > div.rot_box:before { box-shadow: inset 0 0 0 3px #FFFFFF;}
#wrap.main #gnb .navi > a.right > div.rot_box:before { box-shadow: inset 0 0 0 3px #E91F3E;}

#wrap.main #gnb .navi > * > div.rot_box:after {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    transform: rotateX(90deg) translateZ(35px);
    backface-visibility: hidden;
}

#wrap.main #gnb .navi > a.left > div.rot_box:after { background:#2FADF1 url('../images/btn_business.png') no-repeat left center;}
#wrap.main #gnb .navi > div.center > div.rot_box:after {background:#FFFFFF;}
#wrap.main #gnb .navi > a.right > div.rot_box:after {background:#1F63E9 url('../images/btn_people.png') no-repeat right center;}


/* animation */
#wrap.main #gnb .navi.step1{}
#wrap.main #gnb .navi.step1 > * > div.rot_box{transform: rotateX(-90deg);}

/* step */
#wrap.main #gnb .navi.step2 {width:1280px;transition:all 1s;-webkit-transition:all 1s;-moz-transition:all 1s;background: #fff;}
#wrap.main #gnb .navi.step2 > div.center {width:1060px;transition:all 1s;-webkit-transition:all 1s;-moz-transition:all 1s;}
#wrap.main #gnb.scroll .navi.step2 {width:100%;transition:all 1s;-webkit-transition:all 1s;-moz-transition:all 1s;}
#wrap.main #gnb .navi.step3 > div.center .center_inner{visibility: visible;opacity: 1; transition:all 0.5s 0.4s;-webkit-transition:all 0.5s 0.4s;-moz-transition:all 0.5s 0.4s;}
#wrap.main #gnb .navi.step3 {transition: all .4s;-webkit-transition: all .4s;-moz-transition: all .4s;}
#wrap.main #gnb.scroll .navi.step3 {transition: all .4s;-webkit-transition: all .4s;-moz-transition: all .4s;}
#wrap.main #gnb .navi.step3 .btn_left{background: #2FADF1 url(../images/btn_business.png) no-repeat left center;}
#wrap.main #gnb .navi.step3 .btn_right{background: #2FADF1 url(../images/btn_people.png) no-repeat right center;}
#wrap.main #gnb.scroll .navi.step3{background:#fff;max-width: 2000px;width:100%}

#gnb .navi ul.depth1{font-size: 0;letter-spacing: 0;word-spacing: 0;margin: 0 auto;}
#gnb .navi ul.depth1 > li{display:inline-block; vertical-align: top; font-size:16px; width:122px; font-weight:bold;}
#gnb .navi ul.depth1 > li > a{position: relative;display: block;color: #272023;height: 96px;line-height: 96px;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
#gnb .navi ul.depth1 > li > a:hover, #gnb .navi ul.depth1 > li > a.on{color: #3d75b6; border-bottom:10px solid #3d75b6; text-decoration:none;}
#gnb .navi ul.depth1 > li:first-child > a:before{content: none;}
#gnb .navi ul.depth1 > li > a:after{content: none;}
#gnb .navi .logo{width: 254px; padding-top:10px;}
#gnb .navi .logo > a{position: relative;color: #333333;height: 96px; box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}

#gnb .navi .logo > a:before{content: '';position: absolute;left:0;top:27px;bottom:27px;width: 1px;background:#e9e9e9; }
#gnb .navi .logo > a:after{content: '';position: absolute;right:0;top:27px;bottom:27px;width: 1px;background:#e9e9e9; }
#gnb .navi .logo img{max-width: 227px;}

#gnb .navi ul.depth1 > li .depth2{visibility: hidden;position:absolute;left:0;width:150px;background-color:#fff;opacity: 0;z-index:1;padding:20px 0;box-sizing: border-box;-webkit-box-sizing: border-box;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;font-size: 12px;line-height: 14px;font-weight: 700;
}

#gnb .navi ul.depth1 > li .depth2 > li{display: block;position:relative;width: 100%;opacity:0;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform:translateY(-10px);
}


#gnb .navi ul.depth1 > li .depth2 > li > a{display: inline-block;position:relative;vertical-align:middle;z-index: 1;padding: 5px 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
#gnb .navi ul.depth1 > li .depth2 > li > a:before{content: '';position: absolute;left:0;right:0;bottom:4px;height: 1px; background: #ff4311;opacity: 0;}
#gnb .navi ul.depth1 > li .depth2.depth_company{left:-22px;}
#gnb .navi ul.depth1 > li .depth2.depth_business{left:82px;}
#gnb .navi ul.depth1 > li .depth2.depth_sustainability{left:0px;}


#gnb .navi ul.depth1 > li:hover, #gnb .navi ul.depth1 > li.on{color: #333333;}
#gnb .navi ul.depth1 > li:hover .depth2{visibility: visible;opacity: 1;z-index:3;}
#gnb .navi ul.depth1 > li.on .depth2{visibility: visible;opacity: 1;z-index:2;}
#gnb .navi ul.depth1 > li:hover .depth2, #gnb .navi ul.depth1 > li.on .depth2{border-top:1px solid #ff4311;}
#gnb .navi ul.depth1 > li:hover .depth2 > li, #gnb .navi ul.depth1 > li.on .depth2 > li{opacity:1; -webkit-transform: translateY(0px);-moz-transform: translateY(0px);-ms-transform: translateY(0px);transform:translateY(0px);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
#gnb .navi ul.depth1 > li .depth2 > li a:hover
,#gnb .navi ul.depth1 > li .depth2 > li a.on{color:#ff4311;display: inline-block}
#gnb .navi ul.depth1 > li .depth2 > li > a:hover:before
,#gnb .navi ul.depth1 > li .depth2 > li > a.on:before{opacity: 1;}


#gnb .navi ul.depth1 > li:hover .depth2 > li:nth-child(1), #gnb .navi ul.depth1 > li.on .depth2 > li:nth-child(1){transition-delay: 0.1s;}
#gnb .navi ul.depth1 > li:hover .depth2 > li:nth-child(2), #gnb .navi ul.depth1 > li.on .depth2 > li:nth-child(2){transition-delay: 0.2s;}
#gnb .navi ul.depth1 > li:hover .depth2 > li:nth-child(3),#gnb .navi ul.depth1 > li.on .depth2 > li:nth-child(3){transition-delay: 0.3s;}
#gnb .navi ul.depth1 > li:hover .depth2 > li:nth-child(4),#gnb .navi ul.depth1 > li.on .depth2 > li:nth-child(4){transition-delay: 0.4s;}
#gnb .navi ul.depth1 > li:hover .depth2 > li:nth-child(5),#gnb .navi ul.depth1 > li.on .depth2 > li:nth-child(5){transition-delay: 0.5s;}
#gnb .navi ul.depth1 > li:hover .depth2 > li:nth-child(6),#gnb .navi ul.depth1 > li.on .depth2 > li:nth-child(6){transition-delay: 0.6s;}




/* 스크롤시 */
#gnb.scroll{position: fixed;max-width: none;}
#gnb.scroll .navi{max-width: 2000px;width:100%;top:0 !important;}
#gnb.scroll .navi:after{content: '';position: absolute;bottom:0;left:0;right:0;height: 1px;background: #eaeaea;}
#gnb.scroll .navi ul.depth1 > li .depth2{border-left: 1px solid #eaeaea;border-right: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea;}

#wrap.media_360 #gnb{position: fixed;max-width: none;}
#wrap.media_360 #gnb .navi{max-width: 2000px;width:100%;}
#wrap.media_360 #gnb .navi:after{content: '';position: absolute;bottom:0;left:0;right:0;height: 1px;background: #eaeaea;}
#wrap.media_360 #gnb .navi ul.depth1 > li .depth2{border-left: 1px solid #eaeaea;border-right: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea;}
#contents{position:relative;left:0;}

body.active_left #contents,body.active_right #contents{-webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;}
#contents:before {
    content: "";
    position: absolute;
    top: 0;bottom:0;
    left: 0;right:0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: rgba(0, 0, 0, 0.75);
    visibility: hidden;

}

body.stop #contents:before {visibility:visible;opacity: 1;}
.header_inner_wrap .header_inner{ background: #fff;overflow-y: auto}
.header_inner_wrap .header_inner .block{padding:0px 47px 1px 47px;}

/*.header_inner_wrap  ::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);border-radius: 8px;background-color: #F5F5F5;}
.header_inner_wrap  ::-webkit-scrollbar{width: 4px;background-color: #F5F5F5;}
.header_inner_wrap  ::-webkit-scrollbar-thumb {border-radius: 8px;-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.3);background-color: #999;}*/

#header_left .header_inner_wrap .dimmed_area{position: absolute;left: 480px;top:0; background:#3F6; bottom: 0;right: 0;}
#header_left .header_inner_wrap .header_inner .block2 .search_area{position: relative;margin: 20px 0}
#header_left .header_inner_wrap .header_inner .block2 .search_area label{font-size: 0;position: absolute;top:0;left:0;}
#header_left .header_inner_wrap .header_inner .block2 .search_area button{position: absolute;right: 0;top:0;}
.aainput{height: 49px;border: 2px solid #919191;width: 100%;padding: 0 20px 0 10px;font-size: 16px;}

#header_left{position: fixed;top:0;left: 0;bottom:0;z-index: 0;width:100%;visibility: hidden;}
#header_left .header_inner_wrap .header_inner{position: absolute;left:0;top: 0;bottom: 0;width: 480px;text-align: left;}


.cdhcp{width:100%;display: flex; flex-wrap: wrap; justify-content: space-between; margin:auto;}
.cdhcplb{width:33%; height:86px; font-size:14px; line-height:28px;padding-bottom:15px; background:url(../images/xx.jpg) center bottom no-repeat; text-align:center; margin-bottom:10px;}
.cdhcplb img{ margin-bottom:5px; margin-top:5px;}
.cdhcplb a{ color:#333; display:block;}
.cdhcplb a:hover{ background:#2FADF1; color:#FFF; border-radius:5px;}
.cdhcpbt{width:100%; height:86px; background:#2FADF1; line-height:86px; font-size:26px; color:#FFF; padding-left:10%; margin-bottom:20px;}
.cdhcpbt span{ line-height:86px; font-size:16px; color:#FFF; text-transform:uppercase; padding-left:10px; padding-left:10%;}


#header_right .header_inner_wrap .dimmed_area{position: absolute;right: 480px;top: 0;bottom: 0;left: 0;}
#header_right{position:fixed;top:0;right:0;bottom:0;z-index: 0;width:100%;visibility: hidden;}
#header_right .header_inner_wrap .header_inner{position: absolute;right:0;top: 0;bottom: 0;width: 480px;text-align: left; background:#FFF}

.cdhcprbt{width:100%; height:86px; background:#1F63E9; line-height:80px; font-size:26px; color:#FFF; padding-left:10%; margin-bottom:40px;}
.cdhcprbt span{ line-height:86px; font-size:16px; color:#FFF; text-transform:uppercase; padding-left:10px;}

.ggzx{ height:130px; width:100%; margin-top:30px; border-bottom:1px dotted #c6c1bd;  padding-left:10%;}
.ggzxwz{ width:240px; float:left;}
.ggzxwzbt{ font-weight:bold; font-size:15px; padding-bottom:10px; margin-top:3px; padding-right:20px;}
.ggzxwzbt a{ color:#585858;}
.ggzxwzbt a:hover{ color:#FF3600;}

.ggzxwzbtsj{ font-size:13px; height:18px; line-height:18px; margin-bottom:5px; background:url(../images/sjb.jpg) left center no-repeat; padding-left:25px;}

.ggzxwznr{ line-height:24px; color:#989898; font-size:13px; padding-bottom:5px; text-align:justify;}

.ggzximg{ width:140px; height:100px; float:left; margin-right:20px; text-align:center;}
.ggzximg img{border-radius:5px;width:140px; height:100px;}





body.active_left #header_left{z-index: 998;visibility: visible;}
body.active_right #header_right{z-index: 998;visibility: visible;}



#header_left .header_inner_wrap .header_inner{ -webkit-transform: translateX(-480px);-moz-transform: translateX(-480px);-ms-transform: translateX(-480px);-o-transform: translateX(-480px);transform: translateX(-480px);}
#header_right .header_inner_wrap .header_inner{-webkit-transform: translateX(480px);-moz-transform: translateX(480px);-ms-transform: translateX(480px);-o-transform: translateX(480px);transform: translateX(480px);}
body.stop.active_left #header_left .header_inner_wrap .header_inner{-webkit-transform: translateX(0px);-moz-transform: translateX(0px);-ms-transform: translateX(0px);-o-transform: translateX(0px); transform: translateX(0px);}
body.stop.active_right #header_right .header_inner_wrap .header_inner{-webkit-transform: translateX(0px);-moz-transform: translateX(0px);-ms-transform: translateX(0px);-o-transform: translateX(0px);transform: translateX(0px);}
body.stop.active_left #contents{-webkit-transform: translateX(480px);-moz-transform: translateX(480px);-ms-transform: translateX(480px);-o-transform: translateX(480px);transform: translateX(480px);}
body.stop.active_right #contents{-webkit-transform: translateX(-480px);-moz-transform: translateX(-480px);-ms-transform: translateX(-480px);-o-transform: translateX(-480px);transform: translateX(-480px);}
body.stop.active_left #misc_btns{-webkit-transform: translateX(480px);-moz-transform: translateX(480px);-ms-transform: translateX(480px);-o-transform: translateX(480px);transform: translateX(480px);}
body.stop.active_right #misc_btns{-webkit-transform: translateX(-480px);-moz-transform: translateX(-480px);-ms-transform: translateX(-480px);-o-transform: translateX(-480px);transform: translateX(-480px);}
body.stop.active_left #gnb {-webkit-transform: translateX(480px);-moz-transform: translateX(480px);-ms-transform: translateX(480px);-o-transform: translateX(480px);transform: translateX(480px);}
body.stop.active_right #gnb {-webkit-transform: translateX(-480px);-moz-transform: translateX(-480px);-ms-transform: translateX(-480px);-o-transform: translateX(-480px);transform: translateX(-480px);  }



/*#header_left .header_inner_wrap .header_inner{margin-left:-480px;}
#header_right .header_inner_wrap .header_inner{margin-left:-480px;}
body.stop.active_left #header_left .header_inner_wrap .header_inner{margin-left: 0;}
body.stop.active_left #header_right .header_inner_wrap .header_inner{margin-left: 0;}
body.stop.active_left #contents{margin-left:480px;}
body.stop.active_right #contents{margin-left:-480px;}
body.stop.active_left #misc_btns{margin-left:480px;}
body.stop.active_right #misc_btns{margin-left:-480px;}
body.stop.active_left #gnb {margin-left:480px}
body.stop.active_right #gnb {margin-left:-480px;}*/

#gnb.up .navi{top:-52px;}
#gnb.wide .navi{max-width: 2000px;width:100%;transition-duration: 0.3s;-webkit-transition-duration: 0.3s;-moz-transition-duration: 0.3s;}
#wrap.main #gnb.wide .navi.step2{max-width: 2000px;width:100%;}
/*body.stop.active_left #gnb{position: fixed;max-width: none;}
body.stop.active_right #gnb{position: fixed;max-width: none;}
body.stop.active_left #gnb .navi{max-width: 2000px;width:100%;}
body.stop.active_right #gnb .navi{max-width: 2000px;width:100%;}

body.stop.active_left #wrap.main #gnb .navi.step2{width: 100%;}
body.stop.active_right #wrap.main #gnb .navi.step2{width: 100%;}*/

/*
#wrap.main #gnb .navi{-webkit-transform: translateY(-130px);-moz-transform: translateY(-130px);-ms-transform: translateY(-130px);-o-transform: translateY(-130px);transform: translateY(-130px);}
#wrap.main.init #gnb .navi{-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-ms-transform: translateY(0px);-o-transform: translateY(0px);transform: translateY(0px);}
*/


#contents{background: #fff;}
.top_btn{position: relative;max-width: 2000px;}
.top_btn a{overflow: hidden;display:block;position:absolute;right:80px;bottom:50px;width:50px;height:50px;background: url(/Images/company/about/btn_top.png) no-repeat top left;background-position: 0 0;text-indent: 101%;white-space: nowrap;}
.top_btn a:hover{background-position: 0 -50px;}

.location{display:block;position: relative;padding-top:28px;color:#666666; overflow: hidden;background: #fff;}
.location ul{  max-width: 1280px;text-align: right;overflow: hidden; margin: 0 auto;font-size: 0;letter-spacing: 0;word-spacing: 0;}
.location ul li{display:inline-block;line-height:17px;font-size: 12px;}
.location ul li:after{content: '';display:inline-block;position:relative;top:-2px;left:0px;margin:0 10px;width:4px;height:5px;background: url(/Images/company/about/icon_arrow.png) center center;}
.location ul li:last-child:after{content:none;}
.location ul li img{margin-top:2px;}

.section{position: relative;width: 100%;  overflow: hidden;background: #fff;}


.section_top{display: block;position: relative;min-height:650px;overflow: hidden;height: 650px;/*z-index:2;*/}
.section_top.type_full{height: 100vh;}
.section_top .section_inner{position: relative;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;}


.section_top .section_inner .text_container{position: absolute;top:50%;margin-top:-45px;width:100%;text-align: center;color:#ffffff}
.section_top .section_inner .text_container h2{font-size: 68px;line-height: 68px;font-weight: 100;}
.section_top .section_inner .text_container h2:after{content:'';display:block;width:19px;height:1px;background-color: #ffffff;margin:20px auto 23px;}
.section_top .section_inner .text_container p{font-size: 18px;line-height: 28px;font-weight: 300;}

.section_top .scroll_arrow{width:26px;height:26px;margin:0 auto;position: absolute;left:50%;bottom:50px;margin-left: -13px;}
.section_top .scroll_arrow .arrow{position:absolute;width:26px;height:12px;opacity: 0;}
.section_top .scroll_arrow .arrow_img{position:absolute;width:100%;height: 100%;background-image: url("../images/scroll_arrow.png");background-size:26px 12px;}
.section_top .scroll_arrow .arrow:nth-child(1){
    -webkit-animation: arrow 1200ms 0s linear infinite ;
    -moz-animation: arrow 1200ms 0s linear infinite ;
    animation:  arrow 1200ms 0s linear infinite ;
}
.section_top .scroll_arrow .arrow:nth-child(2){
    -webkit-animation: arrow 1200ms 400ms linear infinite ;
    -moz-animation: arrow 1200ms 400ms linear infinite ;
    animation:  arrow 1200ms 400ms linear infinite ;
}
.section_top .scroll_arrow .arrow:nth-child(3){
    -webkit-animation: arrow 1200ms 800ms linear infinite ;
    -moz-animation: arrow 1200ms 800ms linear infinite ;
    animation:  arrow 1200ms 800ms linear infinite ;
}
@-webkit-keyframes arrow {
    0% {-webkit-transform: translate(0px, 0px);opacity: 0;}
    50% {-webkit-transform: translate(0px, 9px);opacity: 1;}
    100% {-webkit-transform: translate(0px, 18px);opacity: 0;}
}
@-moz-keyframes arrow{
    0% {-moz-transform: translate(0px, 0px);opacity: 0;}
    50% {-moz-transform: translate(0px, 9px);opacity: 1;}
    100% {-moz-transform: translate(0px, 18px);opacity: 0;}
}
@keyframes arrow {
    0% {transform: translate(0px, 0px);opacity: 0;}
    50% {transform: translate(0px, 9px);opacity: 1;}
    100% {transform: translate(0px, 18px);opacity: 0;}
}


.section_other ul{display:block;width: 100%;overflow: hidden}
.section_other ul li{display:block;float:left;position:relative;width:50%;height:203px;text-align: center;overflow: hidden;}
.section_other ul li:before{content:'';display:block;position: absolute;  width: 1100px;
    height: 224px;
    left: 50%;top:50%;
    margin:-112px 0 0 -550px;transform:scale(0.95);-webkit-transform:scale(0.95);-moz-transform:scale(0.95);
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}
.section_other ul li:before{background: url(../images/link_highlight_bg.jpg) center top;}
.section_other ul li.link_about:before{background-image: url(../images/link_about_bg.jpg);}
.section_other ul li.link_ci:before{background-image: url(../images/link_ci_bg.jpg);}
.section_other ul li.link_highlight:before{background-image: url(../images/link_highlight_bg.jpg);}
.section_other ul li.link_history:before{background-image: url(../images/link_history_bg.jpg);}
.section_other ul li.link_network:before{background-image: url(../images/link_network_bg.jpg);}
.section_other ul li.link_overview:before{background-image: url(../images/link_overview_bg.jpg);}
.section_other ul li.link_chemical:before{background-image: url(../images/link_chemical_bg.jpg);}
.section_other ul li.link_energy:before{background-image: url(../images/link_enery_bg.jpg);}
.section_other ul li.link_polymer:before{background-image: url(../images/link_polymer_bg.jpg);}
.section_other ul li.link_product:before{background-image: url(../images/link_product_bg.jpg);}
.section_other ul li.link_she:before{background-image: url(../images/link_she_bg.jpg);}
.section_other ul li.link_inno:before{background-image: url(../images/link_inno_bg.jpg);}
.section_other ul li.link_cooperation:before{background-image: url(../images/link_cooperation_bg.jpg);}
.section_other ul li.link_compliance:before{background-image: url(../images/link_compliance_bg.jpg);}
.section_other ul li.link_conduct:before{background-image: url(../images/link_conduct_bg.jpg);}
.section_other ul li.link_social:before{background-image: url(../images/link_social_bg.jpg);}
.section_other ul li.link_rd:before{background-image: url(../images/link_rd_bg.jpg);}
.section_other ul li.link_career:before{background-image: url(../images/link_career_bg.jpg);}
.section_other ul li.link_media:before{background-image: url(../images/link_media_bg.jpg);}
.section_other ul li.link_support:before{background-image: url(../images/link_support_bg.jpg);}
.section_other ul li.link_experience:before{background-image: url(../images/link_experience_bg.jpg);}

.section_other ul li a{display: block;position: relative;width:100%;height:100%;}
.section_other ul li span{display:block;position: relative;}

.section_other ul li .title{font-size:24px;color:#fff;line-height: 24px;padding-top:75px;  font-weight: 300;}
.section_other ul li .copy{font-size:14px;color:#ffffff;line-height: 24px;margin:10px 0;}
.section_other ul li .link{display:block;position: relative;width:25px;height:25px;font-size:0px;color:#ffffff;margin:20px auto 0;background: url(../images/ico_link.png) center center;border-radius: 100%;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;}
.section_other ul li .link:before{content:'';display:block;position: absolute;top:0;left:0;width:100%;height:100%;z-index: 0;background: url(../images/ico_link_on.png) center center;background-size: cover;opacity: 0;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.section_other ul li:hover:before{transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);}
.section_other ul li:hover .link{background: transparent;}
.section_other ul li:hover .link:before{opacity: 1;}


.mot2 {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.mot3 {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.mot4 {
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}
.mot5 {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
.gnb_mot {

    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;

}
.fclear{
    *zoom:1
}
.fclear:after{
    display:block;
    content:"";
    clear:both;
}



.box {

    height: 80px;
    position: relative;
    color: #111;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;

}
/*.btn_left,.btn_right,.center{ -webkit-perspective: 300px;perspective: 300px;}*/
.box div {
    position: absolute;
    text-align: center;
    left: 0;
    top: 0;
    width: 80px;
    height: 96px;
    line-height: 96px;
    font-size: 0;
    transform-origin: 50% 50% -35px;
    -webkit-transform-origin: 50% 50% -35px;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: transform 1s cubic-bezier(.217,.60,.355,1);
    -moz-transition: transform 1s cubic-bezier(.217,.60,.355,1);
    transition: transform 1s cubic-bezier(.217,.60,.355,1);
}
.box .side1 {transform: rotateX(90deg) rotateY(90deg) rotateZ(0deg);-webkit-transform: rotateX(90deg) rotateY(90deg) rotateZ(0deg);}
.box .side2 {transform: rotateX(90deg) rotateY(270deg) rotateZ(0deg);-webkit-transform: rotateX(90deg) rotateY(270deg) rotateZ(0deg);}
.box .side3 {transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg);-webkit-transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg);}
.box .side4 {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);background: none !important;}
.box .side5 {transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg);-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg);}
.box .side6 {transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);-webkit-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);}

.step1 .box .side1{transform: rotateX(-90deg) rotateY(90deg) rotateZ(0deg);-webkit-transform: rotateX(-90deg) rotateY(90deg) rotateZ(0deg);}
.step1 .box .side2{transform: rotateX(-90deg) rotateY(270deg) rotateZ(0deg);-webkit-transform: rotateX(-90deg) rotateY(270deg) rotateZ(0deg);}
.step1 .box .side3{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
.step1 .box .side4{transform: rotateX(-180deg) rotateY(0deg) rotateZ(0deg);-webkit-transform: rotateX(-180deg) rotateY(0deg) rotateZ(0deg);}
.step1 .box .side5{transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);-webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);}
.step1 .box .side6{transform: rotateX(-90deg) rotateY(180deg) rotateZ(0deg);-webkit-transform: rotateX(-90deg) rotateY(180deg) rotateZ(0deg);}
.btn_left .box div { background: #2FADF1;}
.btn_right .box div { background: #1F63E9;}

.btn_left .box .side3 {background:#2FADF1 url('../images/btn_business.png') no-repeat left center}
.btn_right .box .side3 {background:#1F63E9 url('../images/btn_people.png') no-repeat right center}
.btn_left .box .side5 {background:#e85a0e;}
.btn_right .box .side5 {background: #d50021;}
.center .box .side5 {background: #f7f7f7;}
.center .box{position: absolute;}
.center .box div { background: #fff;}

.step2 .center .box div{width: 1060px;-webkit-transition: all 1s;-moz-transition: all 1s;transition: all 1s;}
.step3 .box div{transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out}
.step3 .center .box div.side3{transform: none;-webkit-transform: none;}
#wrap.main #gnb .navi > a.left:hover > .box .side3{background-position:center center;}
#wrap.main #gnb .navi > a.right:hover > .box .side3{background-position:center center;}
body.stop #wrap.main #gnb .navi > a.left > .box .side3{background-position:right center;}
body.stop #wrap.main #gnb .navi > a.right > .box .side3{background-position:left center;}
body.stop #wrap #gnb .navi > a.left:before{content: '';position: absolute;left:0;top:0;bottom:0;width: 1px;background: #fff;  z-index: 1;}
body.stop #wrap #gnb .navi > a.right:before{content: '';position: absolute;right:0;top:0;bottom:0;width: 1px;background: #fff;  z-index: 1;}
/* 로드시 : motion_top에 addClass('in_motion') */

.motion_top .expand_bg {
    -moz-transform: scale(1.12);
    -webkit-transform: scale(1.12);
    -o-transform: scale(1.12);
    -ms-transform: scale(1.12);
    transform: scale(1.12);
    opacity: 0;
}
.motion_top.in_motion .expand_bg {
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-transition: transform 2s , opacity 1.5s;
    -moz-transition: transform 2s , opacity 1.5s;
    -ms-transition: transform 2s , opacity 1.5s;
    -o-transition: transform 2s , opacity 1.5s;
    transition: transform 2s , opacity 1.5s;
}

.section_top .back_container{overflow: hidden;width: 100%; height:650px;max-width: 2000px; position: fixed;top:0px;left:0;right:0;z-index: 0; background: #fff;  margin: 0 auto;will-change:transform}
.section_top.type_full .back_container{height: 100vh;}
.section_top .back_container .resize_inner {position:relative;opacity: 0;visibility: hidden;}
.section_top .back_container .back_img {position:relative;width:100%;max-width: none;}
.section_top .back_container img.back_img {position: absolute;top:0px;left:0;right:0;}
.section_top .back_container{background: url('/Images/company/about/btn_business.png') no-repeat center center;background-size: cover; position: fixed;}